<template>
  <div class="alarm-history-container">
    <div class="sec-head">
      <div class="local-name">报警记录</div>
      <div
        class="delete-btn"
        v-if="userGuardList.includes(guard.AlarmRuleManage)"
      >
        <el-button
          size="small"
          class="alarm-history-delete"
          icon="el-icon-delete"
          @click="deleteSelectedLog"
        >删除所选</el-button>
      </div>
    </div>
    <div class="system-log-search-form">
      <search-form
        v-model="searchForm"
        @search="search"
      ></search-form>
    </div>
    <div class="table">
      <el-table
        size="small"
        @selection-change="handleSelectionChange"
        :data="tableData"
        border
        stripe
      >
        <el-table-column
          type="selection"
          align="center"
        ></el-table-column>
        <el-table-column
          label="设备名称"
          prop="deviceName"
          align="center"
        >
        </el-table-column>
        <el-table-column
          label="参数名称"
          prop="parameterName"
          align="center"
        >
        </el-table-column>
        <el-table-column
          label="实际值"
          prop="value"
          align="center"
        ></el-table-column>
        <el-table-column
          label="预警阈值"
          prop="alertThreshold"
          align="center"
        ></el-table-column>
        <el-table-column
          label="报警阈值"
          prop="alarmThreshold"
          align="center"
        ></el-table-column>
        <el-table-column
          label="报警类型"
          prop="alarmType"
          align="center"
        >
          <template slot-scope="scope">
            <div :style="{color:scope.row.alarmType===alarmType.Alarm?'#FF0006':':#fca130'}">
              {{ scope.row.alarmType===alarmType.Alarm?'报警':'预警' }}</div>
          </template>
        </el-table-column>
        <el-table-column
          label="处理状态"
          prop="status"
          align="center"
        >
          <template slot-scope="scope">
            <div :style="{color:scope.row.status===alarmStatus.Processed?'#07c160':'#fa5151'}">
              {{ scope.row.status===alarmStatus.Processed?'已处理':'未处理' }}</div>
          </template>
        </el-table-column>
        <el-table-column
          label="创建时间"
          prop="createdAt"
          align="center"
        ></el-table-column>
        <el-table-column
          label="更新时间"
          prop="updatedAt"
          align="center"
        ></el-table-column>
        <el-table-column
          label="操作"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="processAlarm(scope.row)"
              size="small"
              v-if="scope.row.status===alarmStatus.Unprocessed"
            >确认处理</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="paging-footer">
      <el-pagination
        background
        @size-change="pageSizeChangeHandler"
        @current-change="currentPageChangeHandler"
        :current-page.sync="currentPage"
        :page-size.sync="pageSize"
        :page-sizes="pageSizes"
        layout="total,sizes, prev, pager, next, jumper"
        :total="totalCount"
        align="right"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import SearchForm from './searchForm';
import { deleteAlarmLogListApi, getAlarmHistoryApi, updateAlarmHistoryApi } from '../../../api/alarmHistory';
import { SortType } from '../../../constants/common';
import { Message, MessageBox } from 'element-ui';
import { parseError, parseTime } from '../../../utils';
import { AlarmStatus, AlarmType } from '../../../constants/alarm';
export default {
  components: { SearchForm },
  data() {
    return {
      selectedAlarmLogUuidList: [],
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      pageSizes: [5, 10, 20, 50, 100],
      orderBy: 'createdAt',
      sort: {
        sortType: SortType.DESC
      },
      totalCount: 0,
      searchForm: {
        name: '',
        type: '',
        status: '',
        deviceUuid: '',
        btnLoading: false
      },
      alarmStatus: AlarmStatus,
      alarmType: AlarmType
    };
  },
  created() {
    this.search();
  },
  methods: {
    handleSelectionChange(value) {
      this.selectedAlarmLogUuidList = value.map(item => {
        return item.uuid;
      });
    },
    deleteSelectedLog() {
      if (this.selectedAlarmLogUuidList.length == 0) return Message.warning('请选择要删除的报警日志');
      MessageBox.confirm(`确认删除${this.selectedAlarmLogUuidList.length}条系统活动日志吗？`, '删除提示', {
        type: 'warning',
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        deleteAlarmLogListApi(this.selectedAlarmLogUuidList)
          .then(res => Message.success(`成功删除${res.count}条报警记录`))
          .catch(error => Message.error(parseError(error)))
          .finally(() => this.search());
      });
    },
    search() {
      this.searchForm.btnLoading = true;
      getAlarmHistoryApi(this.currentPage - 1, this.pageSize, this.sort.sortType, this.orderBy, this.searchForm.deviceUuid, this.searchForm.type, this.searchForm.status)
        .then(res => {
          this.totalCount = res.total_count;
          this.tableData = res.data.map(item => {
            return {
              uuid: item.uuid,
              value: item.device_data,
              alertThreshold: item.alert_threshold,
              alarmThreshold: item.alarm_threshold,
              status: item.alarm_status,
              device: item.deivce,
              deviceName: item.device_name,
              parameterName: item.parameter_name,
              alarmType: item.alarm_type,
              createdAt: parseTime(item.created_at),
              updatedAt: parseTime(item.updated_at)
            };
          });
        })
        .catch(error => Message.error(parseError(error)))
        .finally(() => (this.searchForm.btnLoading = false));
    },
    pageSizeChangeHandler() {
      this.currentPage = 1;
      this.search();
    },
    currentPageChangeHandler() {
      this.search();
    },
    processAlarm(row) {
      MessageBox.confirm(`是否确认处理${row.deviceName}的报警`, '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(res => {
          updateAlarmHistoryApi(row.uuid, AlarmStatus.Processed)
            .then(res => Message.success('处理报警成功'))
            .catch(error => Message.error(parseError(error)))
            .finally(() => this.search());
        })
        .catch(() => {});
    }
  }
};
</script>

<style lang="scss" scoped>
.alarm-history-container {
  .sec-head {
    display: flex;
    justify-content: space-between;
    .local-name {
      padding: 10px;
      font-size: 24px;
      font-weight: 800;
    }
    .delete-btn {
      padding: 10px;
      .alarm-history-delete {
        color: #fff;
        background-color: #f24d1f;
      }
    }
  }
  .table {
    padding: 10px;
    background-color: #fff;
    margin: 0 10px;
  }
  .paging-footer {
    background-color: #fff;
    padding: 10px;
    margin: 0 10px;
  }
}
</style>
